<template>
	<view class="newOrder">
		<view class="form">
			<view class="form_item1">
				<view class="text"> <text>*</text>货号: </view>
				<view class="input">
					<input v-model="productItem.proId" type="text" placeholder="请输入货号" />
				</view>
			</view>
			<!-- <view class="form_item1">
        <view class="text"> <text>*</text>颜色: </view>
        <view class="input">
          <input v-model="productItem.proColor" type="text" placeholder="请输入颜色:" />
        </view>
      </view> -->
			<view class="form_item1">
				<view class="text"> <text>*</text>单价: </view>
				<view class="input">
					<input v-model="productItem.proPrice" type="digit" placeholder="请输入单价" />
				</view>
			</view>
			<view class="form_item1">
				<colorAndSize :type="0" @add="addColor" @change="changeColor" :data="colors"></colorAndSize>
				<!-- <view style="display: flex;margin-bottom: 20rpx;">
					<view class="selected_box">
						<view style="text-indent: 1em;"> <text></text>颜色: </view>
						<view @click="item.select = false" v-for="(item,index) in colors.filter(item=>item.select)"
							class="selected_box_item">{{item.colName}}
						</view>
					</view>
				</view>
				<view class="selected_box">
					<view style="text-indent: 1em;"> <text></text>常用颜色: </view>
					<view class="not_selected_item" @click="item.select = true"
						v-for="(item) in colors.filter(item=>!item.select)">{{item.colName}}
					</view>
				</view>
				<view style="display: flex;gap: 20rpx;margin-top: 20rpx;align-items: center;">
					<text>自定义颜色:</text>
					<view class="input">
						<input v-model="color" type="text" style="flex: 1;" placeholder="请输入颜色">
					</view>
					<u-button @click="addColor(color)"  class="addBtn" shape="circle" text="添加"></u-button>
				</view> -->
			</view>
			<view class="form_item1">
				<colorAndSize :type="1" @add="addSize" @change="changeSize" :data="sizes"></colorAndSize>
			</view>
			<!--  <view class="form_item1">
        <view class="text"> <text>*</text>尺码: </view>
        <view class="input">
          <input v-model="productItem.proSize" type="text" placeholder="请输入尺码:" />
        </view>
      </view> -->
			<view class="form_item1">
				<view class="text"> 备注: </view>
				<view class="input">
					<input v-model="productItem.remark" type="text" placeholder="请输入备注" />
				</view>
			</view>
		</view>
		<view class="footer_btn">
			<view @tap="navigateBack" class=""> 取消 </view>
			<view @tap="submit" class=""> 保存 </view>
		</view>
	</view>
</template>

<script>
	import colorAndSize from "./components/colorAndSize"
	export default {
		components: {
			colorAndSize
		},
		data() {
			return {
				productItem: {},
				colors: [],
				color: "",
				sizes: [],
				size: ""
			};
		},
		methods: {
			changeSize(name, value) {
				let index = this.sizes.findIndex(item => item.sizeName == name)
				this.sizes[index].select = value
			},
			changeColor(name, value) {
				let index = this.colors.findIndex(item => item.colName == name)
				this.colors[index].select = value
			},
			async addSize(value) {
				let index = this.sizes.findIndex(item => item.sizeName == value)
				if (index >= 0) {
					this.sizes[index].select = true
					
					return
				}
				let data = await this.$api.addSizeApi({data:{sizeName:value}})
				// uni.showToast({
				// 	title:data.result,
				// 	icon:"none"
				// })
				if (value) {
					this.sizes.push({
						sizeName: value,
						select: true
					})
				}

			},
			async addColor(value) {
				let index = this.colors.findIndex(item => item.colName == value)
				if (index >= 0) {
					this.colors[index].select = true
					return
				}
				let data = await this.$api.addColorApi({data:{colName:value}})
				// uni.showToast({
				// 	title:data.result,
				// 	icon:"none"
				// })
				if (value) {
					this.colors.push({
						colName: value,
						select: true
					})
				}

			},
			navigateBack() {
				uni.navigateBack()
			},
			submit() {
				// console.log(this.productItem);
				if (this.productItem.proId == "") {
					uni.showToast({
						title: "请输入货号",
						icon: "none",
					});
				} else if (this.productItem.proPrice == "") {
					uni.showToast({
						title: "请输入单价",
						icon: "none",
					});
				} else {
					// @tap="skip('/pages/product/product_details')"
					let selectColor = this.colors.filter(item => item.select)
					let selectSize = this.sizes.filter(item => item.select)
					this.productItem.proColor = selectColor.map(item => item.colName).join(",")
					this.productItem.proSize = selectSize.map(item => item.sizeName).join(",")
					this.$api
						.productCreateOrEditApi({
							id: this.productItem.id,
							proId: this.productItem.proId,
							proColor: this.productItem.proColor,
							proPrice: this.productItem.proPrice,
							proSize: this.productItem.proSize,
							remark: this.productItem.remark,
						})
						.then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: "修改成功",
									icon: "none",
								});
								uni.navigateBack({
									delta: 2
									// url: "/pages/product/index",
								});
							}
						});
				}
			}
		},

		async onLoad(option) {
			// console.log(option);
			// console.log(JSON.parse(decodeURIComponent(option.productItem)));
			this.productItem = JSON.parse(decodeURIComponent(option.productItem))
			let data = await this.$api.colorAndSizeListApi()
			data.result.colors = data.result.colors.map(item => {
			console.log(":"+(this.productItem.proColor===null))
				/**
				 * @type {boolean} true为选中 false为未选
				 */
				let select = this.productItem.proColor===null?false:
				this.productItem.proColor.split(",").indexOf(item.colName) >= 0 ? true : false
				return {
					...item,
					select
				}
			})
			data.result.sizes = data.result.sizes.map(item => {
				/**
				 * @type {boolean} true为选中 false为未选
				 */
				let select = this.productItem.proSize===null?false:
				this.productItem.proSize.split(",").indexOf(item.sizeName) >= 0 ? true : false
				return {
					...item,
					select
				}
			})
			this.colors = data.result.colors
			this.sizes = data.result.sizes

		}
	};
</script>

<style lang="scss" scoped>
	.addBtn {
		text-indent: 0;
		padding: 20rpx;
		background-color: red;
		color: #fff;
		width: auto;
		height: auto;
		box-sizing: border-box;
	}

	.selected_box {
		flex: 1;
		align-items: center;
		display: flex;
		text-indent: 0;
		gap: 20rpx;
		flex-wrap: wrap;

		.selected_box_item {
			background-color: red;
			color: #fff;

			padding: 10rpx;
		}

		.not_selected_item {
			color: black;
			background-color: #f2f2f2;
			text-indent: 0;
			padding: 10rpx;
		}
	}

	page {
		background: #fff;
	}

	.input {
		display: flex;
		align-items: center;
		color: #000;
		flex: 1;

		input {
			height: 94rpx;
			background: #f2f2f2;
			border-radius: 47rpx;
			width: 100%;
		}
	}

	.newOrder {
		background: #fff;
		height: 100vh;

		.form {
			padding: 38rpx 68rpx 32rpx 68rpx;
			background-color: #fff;


			.form_item1 {
				color: #bdbdbd;
				margin-bottom: 36rpx;
				text-indent: 1em;

				.text {
					font-size: 0.875rem;
					margin-bottom: 20rpx;

					text {
						color: #fe3430;
					}
				}

				.input {
					display: flex;
					align-items: center;
					color: #000;

					input {
						height: 94rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
						width: 100%;
					}
				}
			}
		}

		.footer_btn {
			display: flex;
			justify-content: space-around;
			margin-top: 50rpx;

			view {
				background-image: url("/static/images/Registration/button.png");
				background-size: 280rpx 123rpx;
				color: #fff;
				width: 280rpx;
				height: 123rpx;
				line-height: 100rpx;
				text-align: center;
				border-radius: 49rpx;
			}
		}
	}
</style>